// 这是main.js 是我们项目的JS入口文件

// 1.导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from 'jquery'; // jquery是一个js模块 会向外暴露成员($)  所以一般js模块使用import *** from *** 方式导入模块并接收成员
// 正常情况下js脚本不能引入另外js脚本 除非借助node提供的require
// 等价于 node 中 const $ = require('jquery); 加载并执行

// 使用 import 语法 导入css样式表  webpack默认不能处理后缀名为.css的样式表文件
import './css/index.css';
// webpack遇到后缀名为.css文件不能处理时 并不会直接报错 
// 而是先去找配置文件webpack.config.js中找module节点 
// 在module对象中找rules配置的规则 看有没有能找到匹配.css后缀名的规则
// 如果有 调用指定load进行处理


// 样式表不会向外暴露成员 只是单纯的样式 所以一般非js模块 使用import '路径' 把样式表加载过来就可以了
import './css/index.less';
import './css/index.scss';
// 注意：webpack，默认只能打包处理 JS 类型的文件，无法处理 其他的非 JS 类型的文件;
// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 Loader 加载器;
// 1.如果想要打包处理 css 文件，需要安装  cnpm i style-loader css-loader -D
// 2.打开 webpack.config.js 这个配置文件， 在里面 新增一个 配置节点，叫做 module ，
// 它是一个对象 在这个module对象身上，有一个 rules 属性，这个rules 属性是个数组；
// 在这个数组中，存放了所有第三方文件的匹配和处理规则：


//注意：webpack 处理第三方文件类型的过程：
// 1.发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方loader规则
// 2.如果能找到对应的规则，就会调用 对应的loader处理 处理这种文件类型;
// 3.在调用loader的时候，是从后往前调用的；
// 4.当最后的一个loader调用完毕， 会把 处理的结果，直接交给 webpack进行 打包合并，最终输出到
// bundle.js中去   webpack自己不处理第三方文件类型  分发到对应相关loader里面进行处理

$(function () {
    $('li:odd').css('backgroundColor', 'red');
    $('li:even').css('backgroundColor', function () {
        return '#' + '0094ff';
    })


});


// 经过刚才的演示，Webpack 可以做什么事情？？？
// 1. webpack 能够处理 JS 文件的互相依赖关系；
// 2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不识别的语法，转为 低级的，浏览器能正常识别的语法

// 刚才运行的命令格式：    webpack  要打包的文件的路径(入口)  打包好的文件输出路径(出口)

// 使用 webpack-dev-server 这个工具(只能本地安装)，来实现自动打包编译的功能 并自动刷新浏览器
// webpack-dev-server依赖于webpack 强制要求项目本地安装webpack
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2. 安装完毕后，这个 工具的用法， 和 webpack 命令的用法，完全一样
// 3. 由于，我们是在项目中，本地(当前项目)安装的 webpack-dev-server ， 
// 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）
// 在package.json中 scripts节点 配置一些我们要运行的命令，运行脚本
// 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
// (注意 哪怕全局安装了webpack。项目本地也要安装一个  webpack-dev-server工具才正常运行)
// npm run dev 会去package.json 去执行scripts节点中dev指定的webpack-dev-server脚本
// 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，
// 并没有存放到 实际的 物理磁盘(本地硬盘)上；而是，
// 直接托管到了 电脑的内存中(以内存形式托管起来)，以一个localhost服务器形式运行起来
// 所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;

// 虽然bundle.js放到了项目根目录  但是看不见  
// 可以认为webpack-dev-server工具为我们在项目根目录放置了一个虚拟的bundle.js

// 6. 我们可以认为， webpack-dev-server 把打包好的 文件，以一种虚拟的形式，
// 托管到了 咱们项目的 根目录中，虽然我们看不到它，
// 但是，可以认为， 和 dist  src   node_modules  平级，
// 有一个看不见的文件，叫做 bundle.js



// 类比apache的配置文件httpd.conf配置网站(项目)根目录
// webpack-dev-server打包构建：
// 在本地开了一个localhost服务器 端口号为8080
// 把当前项目根目录绝对路径配置成了网站根目录(/) 
// localhost:8080/ /指向网站根目录(项目根目录)
// 并把打包好的bundle.js文件托管到网站根目录(项目根目录)
// 在电脑的内存(C盘)保存 所以在网站根目录(项目根目录)是虚拟的

/*

/开头,如果通过是node(后端技术)执行，
则/指磁盘根目录(例如fs.readFile(url, function(err, 'utf8',data){}),
require(url))。如果是浏览器对script标签link标签img标签发起的请求
则/指网站根目录(项目根目录)
*/
